<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <title>03CSS고급선택자</title>
        <style type="text/css">
            /*그룹선택자*/
            #first, #fourth { font-size: 24px; font-style: italic; color: orange}
            
            /*후손(하위)선택자*/
            #hmenu li { color: red; }
            #fmenu li { color: blue; }

            /*자식선택자*/
            #headers > h1 { color: green}
            
            /*인접Adjacent 선택자*/
            div + p { color: pink;}
            p + p { color: purple;}
        </style>
    </head>
    <body>
        <h1>CSS고급선택자</h1>
        
        <h2>그룹group 선택자</h2>
        <p>하나 이상의 요소에 특정 스타일 적용</p>
        <p>각 요소들은 , 로 구분</p>
        <div id="first">첫번쨰</div>
        <div id="second">두번쨰</div>
        <div id="third">세번쨰</div>
        <div id="fourth">네번쨰</div>
        <hr />
        
        <h2>후손(하위) 선택자</h2>
        <p>부모 선택자를 기준으로 모든 하위 선택자를 선택해서 스타일 적용</p>
        <p>HTML 문서의 계층구조를 이용</p>
        <ul id="hmenu">
            <li><ol>
                <li>Home</li>
                <li>About</li>
                </ol></li>
            <li>메일</li>
            <li>더보기</li>
        </ul>
        <ul id="fmenu">
            <li>회사소개</li>
            <li>제휴제안</li>
            <li>이용약관</li>
        </ul>
        <hr />
        
        <h2>자식child 선택자</h2>
        <p>부모 선택자를 기준으로 모든 자식 요소를 대상으로 스타일 적용</p>
        <p>HTML 문서의 계층구조를 이용</p>
        <div id="headers">
            <h1>제목</h1>
            <div id="sub"><h1>제목2</h1></div>
            </div>
        <ul id="fmenu1">
            <li>회사소개</li>
            <li>제휴제안</li>
            <li>이용약관</li>
        </ul>
        <hr />
        
        <h2>인접Adjacent 선택자</h2>
        <p>  같은 형제안에서 한 요소를 기준으로 바로 뒤 요소를 선택해서 스타일 적용 </p>
        <p>HTML 문서의 계층 구조를 이용</p>
        <div>
            <p>첫번째 줄</p>
            <p>두번째 줄</p>
            <div>블럭 요소</div>
            <p>세번째 줄</p>
        </div>
        <hr />
        
        <h2>선택자 우선순위</h2>
        <p> !important (속성값 뒤에 추가)</p>
        <p>인라인 스타일(style 태그로 적용)</p>
        <p>id 선택자( '#이름'으로ㅌ 적용 )</p>
        <p>class 선택자( '.이름'으로 적용 )</p>
        <p>가상 class 선택자( ':이름'으로 적용 )</p>
        <p>타입 선택자( '요소이름'으로 적용 )</p>
        </body>
</html>